<!--vue模板-->
<template>
  <div>
    <!--客户搜索-->
    <div>
      <el-form>
        <el-row>
          <el-col :span="5.5">
            <el-form-item label="客户公司名称:"style="margin-right: 20px; ">
              <el-input v-model="filters.contactName" placeholder="请输入"/>
            </el-form-item>
          </el-col>
          <el-col :span="5.5">
            <el-form-item label="所属销售:" style="margin-right: 20px;">
              <el-input v-model="filters.company" placeholder="全部" />
            </el-form-item>
          </el-col>
          <el-col :span="5.5" >
            <el-form-item label="状态:" style="margin-right: 20px; width: 200px;">
              <el-select v-model="filters.status" placeholder="全部">
                <el-option value="1">待报价</el-option>
                <el-option value="2">已报价</el-option>
                <el-option value="3">确认签约</el-option>
                <el-option value="4">拒绝合作</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="initData">搜索</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-col>
        </el-row>

      </el-form>
    </div>

    <!--客户列表-->
    <el-table :data="tableData" style="width: 100%; margin-top: 50px;" stripe border>
      <el-table-column
        label="询价编号"
        width="120"
        prop="code"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="type"
        label="类型"
        width="100"
        header-align="center"
        align="center"
      >
        <template v-slot="{ row }">
          <span v-if="row.type == 1">询价单</span>
          <span v-else>询价单</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="company"
        label="客户公司名称"
        width="150"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="contactName"
        label="客户名称"
        width="100"
        header-align="center"
        align="center"
      />

      <el-table-column
        prop="saleName"
        label="所属销售"
        width="100"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="status"
        label="状态"
        width="120"
        header-align="center"
        align="center"
      >
        <template v-slot="{ row }">
          <span v-if="row.status == 1">待报价</span>
          <span v-else-if="row.status == 2">已报价</span>
          <span v-else-if="row.status == 3">确认签约</span>
          <span v-else-if="row.status == 4">拒绝合作</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="note"
        label="修改描述"
        width="100"
        header-align="center"
      />
      <el-table-column
        prop="reason"
        label="原因"
        width="70"
        header-align="center"
      />

      <el-table-column label="操作" header-align="center" align="center">
        <template v-slot="{ row }">
          <el-button type="primary" @click="look(row.id)">详情</el-button>
          <el-button
            v-if="row.status == 1"
            type="primary"
            >创建供货商询价单
          </el-button>
          <el-button
            v-if="row.has_forwarder_inquiry == 0"
            type="primary"
            @click="forwarderInquiry(row)"
          >创建货代询价单
          </el-button>
          <el-button v-if="row.status == 3" type="primary"
            >创建采购单</el-button
          >
          <el-button v-if="row.status == 1" type="primary">添加运费</el-button>
          <el-button v-if="row.status == 3" type="primary"
            >创建销售订单</el-button
          >
          <el-button v-if="row.status == 3" type="primary"
            >创建销售订单审核</el-button
          >
          <el-button v-if="row.status == 3" type="primary"
            >申请创建销售订单</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div
      style="
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        text-align: right;
      "
    >
      <el-pagination
        background
        :page-size="pageSize"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onMounted } from "vue";
//引入api
import { queryInquiry } from "@/api/customerinquiry.js";
//引入图标
import { Delete, Edit } from "@element-plus/icons-vue";
//引入路由
import { useRouter } from "vue-router";
//表格数据
const tableData = ref();
//路由实例
const router = useRouter();

//过滤条件
const filters = ref({
  company: "",
  contactName: ""
});

//重置
function reset() {
  filters.value = {
    company: "",
    contactName: ""
  };
  initData();
}
function forwarderInquiry(row) {
  console.log("row>>>",row.contactName);
  let customer_id = row.cid;
  let InquiryId = row.id;
  let contactName = row.contactName;
  let code = row.code;
  console.log("InquiryId>>>", InquiryId);
  router.push({ path: "/forwarderInquiry/add", query: { InquiryId, contactName,customer_id,code } });
}
//查询详情
function look(id) {
  router.push({ path: "/customer/inquiry/detail", query: { id } });
}

//添加客户
function add() {
  router.push("/customer/inquiry/add");
}

//分页信息
const page = ref(1); //当前页 默认第1页
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数

//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 1;
  //查询数据
  initData();
}

//页面发生变化
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  initData();
}

//修改
function update(id) {
  //console.log("id>>>", id);
  router.push({ path: "/customer/update", query: { id } });
}

//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    companyName: filters.value.company,
    saleName: filters.value.contactName,
    status: filters.value.status
  };
  let res = await queryInquiry(data);
  if (res.code == 200) {
    console.log("客户询价到底有没有拿到客户id", res)
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}

//生命周期钩子
onMounted(() => {
  initData();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped></style>
